/* 引入倒计时字体 */
@font-face {
  /*这里是说明调用来的字体名字*/
  font-family: lcd;
  /*这里是字体文件路径*/
  src: url('../../../assets/font/lcd.ttf')
}
/* 内容 */
.wrap{
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../../../assets/knowledge/BGX1.jpg") no-repeat center center;
  background-size: 100% 100%;
}
.title-content{
  position: absolute;
  top: 20px;
  left: 15px;
  width: 500px;
  height: 76px;
  background: url("../../../assets/knowledge/titleX1.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.title-text{
  height: 100%;
  width: 400px;
  color: rgb(249, 185, 11);
  font-size: 32px;
  line-height: 76px;
}
.top-ele{
  position: absolute;
  top: 0;
  left: 50%;
  width: 484px;
  height: 272px;
  margin-left: -242px;
  background: url("../../../assets/knowledge/UFOX1.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 3;
}
.downTime{
  text-align: center;
  font-size: 70px;
  color: rgb(107, 255, 249);
  margin-top: 28px;
  font-family: lcd;
}
.top-line{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 58px;
  background: url("../../../assets/knowledge/toplineX1.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 2;
}
.right-ele{
  position: absolute;
  top: 50%;
  right: 15px;
  width: 28px;
  height: 700px;
  margin-top: -350px;
  background: url("../../../assets/knowledge/rightX1.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 2;
}
.left-ele{
  position: absolute;
  top: 50%;
  left: 15px;
  width: 28px;
  height: 700px;
  margin-top: -350px;
  background: url("../../../assets/knowledge/leftX1.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 2;
}
.bottom-ele{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 483px;
  background: url("../../../assets/knowledge/bottom.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 1;
  overflow: hidden;
}
.bottom-line{
  position: absolute;
  bottom: 10px;
  left: 20px;
  width: 1893px;
  height: 49px;
  background: url("../../../assets/knowledge/bottomlineX1.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 2;
}
.canvas-wrap{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
/* 中间的线 */
.middle-line{
  position: absolute;
  top: 214px;
  left: 50%;
  z-index: 9;
  height: 422px;
  width: 5px;
  margin-left: 3px;
  border-radius: 3px;
  background-color: rgb(78, 255, 215);
  box-shadow: 0 0 5px rgb(78, 255, 215);
  /*display: flex;*/
  /*justify-content: flex-end;*/
  /*flex-direction: column;*/
  /*align-items: center;*/
  padding-top: 95px;
}
.middle-circular{
  position: relative;
  background-color: rgb(78, 255, 215);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-bottom: 45px;
  margin-left: -2px;
}
.line1{
  position: absolute;
  top: 4px;
  left: -50px;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, rgb(23, 103, 106), rgb(78, 255, 215));
}
.card1{
  position: absolute;
  top: -45px;
  left: -280px;
}
.time-info{
  padding-left: 10px;
  color: rgb(1, 196, 183);
}
.info-card-left{
  width: 231px;
  height: 82px;
  background: url("../../../assets/knowledge/infoCardX1.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 11;
  padding: 8px 5px 8px 12px;
}
.line2{
  position: absolute;
  top: 4px;
  left: 10px;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, rgb(78, 255, 215),rgb(23, 103, 106));
}
.card2{
  position: absolute;
  top: -85px;
  left: 59px;
}
.info-card-right{
  width: 231px;
  height: 82px;
  background: url("../../../assets/knowledge/infoCardX1.png") no-repeat center center;
  background-size: 100% 100%;
  z-index: 11;
  transform: rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.right-text{
  width: 231px;
  height: 82px;
  position: absolute;
  top: 21px;
  left: 0;
  padding: 8px 5px 8px 12px;
}
.card-info{
  display: flex;
  justify-content: flex-start;
}
.flip-animation-start {
  animation: flipBook1 1s forwards;
  -moz-animation: flipBook1 1s forwards; /* Firefox */
  -webkit-animation: flipBook1 1s forwards; /* Safari and Chrome */
  -o-animation: flipBook1 1s forwards; /* Opera */
}
.flip-animation-end {
  animation: flipBook2 1s forwards;
  -moz-animation: flipBook2 1s forwards; /* Firefox */
  -webkit-animation: flipBook2 1s forwards; /* Safari and Chrome */
  -o-animation: flipBook2 1s forwards; /* Opera */
}
@keyframes flipBook1 {
  0% {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(-360deg);
    -ms-transform: rotateX(-360deg);
    -o-transform: rotateX(-360deg);
    transform: rotateX(-360deg);
  }
}
/*关闭书页*/
@keyframes flipBook2 {
  0% {
    -webkit-transform: rotateX(-360deg);
    -ms-transform: rotateX(-360deg);
    -o-transform: rotateX(-360deg);
    transform: rotateX(-360deg);
  }
  100% {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}
.avatar-mid{
  border: 1px solid rgb(221, 171, 16);
  height: 65px;
  width: 65px;
}
.persinal-info{
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  color: rgb(221, 171, 16);
  margin-left: 15px;
  width: 130px;
}
.persinal-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line3{
  position: absolute;
  top: 4px;
  left: -80px;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, rgb(23, 103, 106), rgb(78, 255, 215));
}
.card3{
  position: absolute;
  top: -40px;
  left: -310px;
}
.line4{
  position: absolute;
  top: 4px;
  left: 10px;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, rgb(78, 255, 215),rgb(23, 103, 106));
}
.card4{
  position: absolute;
  top: -85px;
  left: 89px;
}
.line5{
  position: absolute;
  top: 4px;
  left: -110px;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, rgb(23, 103, 106), rgb(78, 255, 215));
}
.card5{
  position: absolute;
  top: -40px;
  left: -340px;
}
.line6{
  position: absolute;
  top: 4px;
  left: 10px;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, rgb(78, 255, 215),rgb(23, 103, 106));
}
.card6{
  position: absolute;
  top: -85px;
  left: 119px;
}
/* 左侧内容 */
.left-content{
  position: absolute;
  top: 200px;
  left: 70px;
  width: 500px;
  z-index: 12;
}
.count-down{
  width: 100%;
  height: 60px;
  border: 2px solid rgb(45, 115, 115);
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
  background-size: 100% 100%;
}
.subjectNum{
  font-size: 16px;
  font-weight: bold;
  color: #01c4b7;
  margin-left: 20px;
}
.secondNum{
  font-size: 16px;
  color: rgb(249, 185, 11);
  margin-right: 20px;
}
.autobg{
  width: 498px;
  height: 56px;
  background: linear-gradient(90deg,rgb(3, 23, 33), rgb(90, 84, 29));
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 5;
  opacity: 0.7;
  border-right: 2px solid rgb(249, 185, 11);
  transition: width 1s;
  //animation : go 60s linear infinite;
}
@keyframes go {
  from {
    width: 498px;
  }
  to {
    width: 0;
  }
}
.scaleAvat{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  justify-content: space-between;
}
.top-text{
  position: absolute;
  top: -30px;
  left: -3px;
  font-size: 14px;
  color: #56cec7;
}
.scaleSenc{
  width: 100%;
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.scale-bottom{
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.bottom-text{
  position: absolute;
  top: 10px;
  left: -3px;
  font-size: 14px;
  color: rgb(170, 136, 22);
}
.subject{
  margin-top: 110px;
  position: relative;
  width: 500px;
  border-right: 1px dashed rgb(45, 115, 115);
  border-left: 1px dashed rgb(45, 115, 115);
  border-bottom: 1px dashed rgb(45, 115, 115);
  background: rgba(0,25,36,.5);
}
.subject-title{
  width: 500px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid rgb(45, 115, 115);
  border-bottom: 1px solid rgb(45, 115, 115);
  font-weight: bold;
  font-size: 16px;
  color: #01c4b7;
  padding: 10px 0 10px 20px;
  background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
  background-size: 100% 100%;
}
.subject-text{
  width: 500px;
  color: #56cec7;
  font-size: 16px;
  line-height: 2;
  padding: 0 20px;
  word-break:break-all;
}
.left-content-wrap{
  width: 100%;
  height: 225px;
  overflow-y: auto;
  overflow-x:hidden;
}
/* 右侧内容 */
.right-content{
  width: 288px;
  position: absolute;
  top:90px;
  right: 70px;
  z-index: 11;
}
.peopleNum{
  width: 100%;
  height: 50px;
  border: 2px solid rgb(45, 115, 115);
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
  background-size: 100% 100%;
}
.resolveNum{
  width: 100%;
  height: 50px;
  border: 2px solid rgb(45, 115, 115);
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
  background-size: 100% 100%;
}
.rank-wrap{
  width: 100%;
  height: 50px;
  border: 2px solid rgb(45, 115, 115);
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  background: url("../../../assets/knowledge/bg-line.png") no-repeat center center;
  background-size: 100% 100%;
}
.defen{
  color: rgb(63, 155, 152);
  margin-bottom: 5px
}
.line-defen{
  height: 2px;
  width: 25px;
  background-color: rgb(2, 34, 49);
  margin: 0 auto;
}
.textColor{
  color: #01c4b7;
}
.bgColor{
  background-color: #56cec7;
}
.rank-line{
  width: 100%;
  height: 410px;
  border-right: 1px dashed rgb(45, 115, 115);
  border-left: 1px dashed rgb(45, 115, 115);
  border-bottom: 1px solid rgb(45, 115, 115);
  background: rgba(0,25,36,.5);
  position: relative;
}
.rank-scroll{
  height: 100%;
  width: 283px;
  overflow-y: auto;
  overflow-x: hidden;
}
.rank-ul{
  padding:0 5px 0 15px;
}
.rank-li{
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  height: 25px;
  align-items: center;
}
.rank-order{
  width: 22px;
  text-align: center;
}
.rank-grade{
  width: 50px;
}
.rank-name{
  text-align: left;
  width: 75px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-title{
  text-align: left;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-text{
  color: #56cec7;
  font-size: 14px;
}
.theFirst{
  width: 22px;
  height: 25px;
  background: url("../../../assets/knowledge/theFirst.png") no-repeat center center;
  background-size: 100% 100%;
}
.theSecond{
  width: 22px;
  height: 25px;
  background: url("../../../assets/knowledge/theSecond.png") no-repeat center center;
  background-size: 100% 100%;
}
.theThird{
  width: 22px;
  height: 25px;
  background: url("../../../assets/knowledge/theThird.png") no-repeat center center;
  background-size: 100% 100%;
}
.quesWrap{
  position: absolute;
  //width: 400px;
  min-height: 460px;
  max-height: 560px;
  top: -50px;
  left: -415px;
  z-index: 11;
  background-color: rgba(0,25,36,0.8);
  border-bottom: 2px solid rgb(45, 115, 115);
  border-top: 2px solid rgb(45, 115, 115);
  border-right: 1px dashed rgb(45, 115, 115);
  border-left: 1px dashed rgb(45, 115, 115);
  padding: 20px;
}
.quesScroll{
  width: 360px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
/* 绘制顶部分线 */
.sub-item{
  position: absolute;
  bottom:0;
  left: 0;
  width: 1px;
  background: rgba(78, 255, 215,0.5);
  box-shadow: 0 0 2px rgb(78, 255, 215);
}
.top-point{
  position: absolute;
  top: -23.5px;
  left: -24.5px;
  width: 47px;
  height: 47px;
  background: url("../../../assets/knowledge/cyan-star.png") no-repeat center center;
  background-size: 100% 100%;
}
.bottom-ring{
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 60px;
  height: 60px;
  transform:rotateX(60deg);
  /*background: radial-gradient(rgba(249, 185, 11, .6) 0%, rgba(249, 185, 11, 0.4) 30%,rgba(249, 185, 11, .2) 40%,rgba(0, 0, 0, 0) 80%);*/
  background: radial-gradient(rgba(78, 255, 215, .6) 0%, rgba(78, 255, 215, 0.4) 30%,rgba(78, 255, 215, .2) 40%,rgba(0, 0, 0, 0) 80%);
}
.top-sub-name{
  position: absolute;
  top: -10px;
  left: 15px;
  width: 60px;
  color: rgb(78, 255, 215);
  font-size: 18px;
}
/* 绘制曲线 */
.svg-wrap{
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
}
/* 人员头像 */
.people-avatar{
  position: absolute;
  top: -15px;
  left: 0;
  margin-left: -16px;
  width: 42px;
  height: 51px;
  background: url("../../../assets/knowledge/point.png") no-repeat center center;
  background-size: 100% 100%;
}
.posi-ava{
  position: absolute;
  top: -30px;
  //left: 0;
  padding: 0 5px;
  background-color: rgb(7, 29, 40);
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border: 1px solid #2d7373;
  color: #2d7373;
  font-size: 16px;
}